<template>
    <el-container>
        <div style="text-align: center;margin-left: 25%">
            <el-upload
                :auto-upload="false"
                :http-request="uploadFile"
                ref="upload"
                drag
                :on-success="fileclear"
                action="/v1/file/push"
                clearFiles
                accept=".ttf,.TTF,.otf,.OTF"
                style="margin-top:35%;margin-left:2.5%">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传ttf文件</div>
            </el-upload>
            <div>
                <el-input v-model="input" placeholder="请输入内容" maxlength="10" style="width: 50%;" clearable show-word-limit></el-input>
                <el-button @click="submitUpload()">svgTest</el-button> 
            </div>
            <div>
                <el-color-picker v-model="colors" color-format="hex"></el-color-picker>
            </div>
            <div style="width: 50%;margin-left: 24.5%" >
                <el-slider
                  v-model="size"
                  show-input 
                  :min="5"
                  :max="34">
                </el-slider>
            </div>
        </div>
        <div style="text-align: center;padding: 50px; margin-top: 10%;">
            
            <div :style="'font-family:'+fontName" >
                <p style="font-size: 500px">{{input}}</p>
                <a :href="fonturl" class='download'  download="" v-if="fonturl!=''"> 下载 </a>
            </div>
        </div>
    </el-container>
</template>

<script>
import {svgApi,svgsingle} from '../../api/autopay'; 
import {stringToHex,HexToten} from '../../js/tools';
import axios from 'axios'; 
export default {
    name: '',
    data(){
        return {
            visible: false,
            input : "字",
            size:10,
            svgs:[],
            zippath:"",
            fontName:"test",
            fonturl:"",
            files : null,
            ServiceIP: "",
            myFont:"",
            colors: "#000000",
            fileData: new FormData(),
            svgMod: "20210430145358",
            options: [
                {
                    value: '20210430145358',
                    label: '黑色字体'
                }, 
                {
                    value: '20210430113149',
                    label: '绿色字体'
                },{
                    value:"20210430154754",
                    label:"红色"
                }
            ]
        }
    },
    mounted:function () {
        this.GetServiceIP();
    },
    methods: {
        GetServiceIP(){
            var that = this;
            that.ServiceIP = document.location.origin;
        },
        uploadFile(f){
            // savepath
            this.fileData.append("file",f.file);
            // this.fileData.append("ttf",f.file.name);
            this.files = f.file;
        },
        submitUpload() {
            var that = this;
            that.loads = true
            that.$refs.upload.submit();
            var words = that.input.split('')
            
            for (var i = words.length - 1; i >= 0; i--) {
                let par = new FormData();
                var wordmsg =  words[i]
                par.append("file",that.files);
                par.append("ttf",that.files.name);
                par.append("words",wordmsg)  

                axios.post("/v1/otfApi/otf",par).then( 
                res => { 
                    let { code, msg, data } = res;
                    if (data.code == 200){
                        that.$message("上传成功")
                        var tmp = data.data.replace(/'/g,"\"");
                        var jsondict = JSON.parse(tmp);
                        var hexmsg = stringToHex(wordmsg);
                        var fontStyle = "my"+HexToten(hexmsg);
                        var rule = "{font-family:"+fontStyle+";src:url(\""+that.ServiceIP+jsondict.ttf+"\");font-weight: normal;font-style: normal;}"
                        that.fontName = fontStyle;
                        that.fonturl = that.ServiceIP+jsondict.zip;
                        let style = document.createElement('style');
                        style.type = "text/css";
                        style.innerText = "@font-face "+rule;
                        console.log(style);
                        document.getElementsByTagName('head')[0].appendChild(style)

                    }else{
                        that.$message.error("上传失败");
                        that.loads = false
                    }
                })
               


            }
            
            that.fileData =  new FormData();
        },
        show(input){
            var that = this;
            var words = input.split('')
            that.svgs = []
            console.log(words);
            for (var i = 0; i < words.length ; i++) {
               var u = words[i].charCodeAt(0).toString(16)
               that.svgs.push(that.ServiceIP+"/svg/"+that.svgMod+"/uni"+u.toUpperCase()+".svg")
            }
        }


    }//methods
}
</script>

<style type="text/css">
    html {
        font-size: (16 / 3.75) vw;
    }

    @font-face {  
        font-family:  "myfont" ; 
        src: url("http://192.168.248.228:8000/files/otf/23383.otf"); 
        font-weight: normal;  
        font-style: normal;  
    }


</style>
